<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="../css/square.css">
    <link rel="stylesheet" href="../css/mypeople.css">
    <title>Document</title>
 
</head>
<body>
    <div id="page">
            <div class="pageTop">
                    <img src="../images/profile/right_arrow.png" alt="" class='backArrow'>
                    <span class="pageTitle" style="margin-left:13%;">我的达人</span>
                    <span class="pageinstr">达人:12</span>
            </div>
           <div class='people'>
               <!-- 相互关注 -->
                <div class="content d-flex-md">
                        <div style='display: flex;justify-content: space-between;width:100%;align-items: center'>
                          <img src="../images/487bd14049e44235d25f28df11b0a7e9.jpeg" alt=""  style="width:2.68rem;height:2.68rem;" class="avantar">
                          <div style="font-size: 12px;margin-top:0 !important;width:63%">
                            <div style="display: flex;align-items: flex-start;height:2rem;">
                                <span class="name">随便一个名字嘛随便一个名字嘛</span>
                                <!-- 是否为时尚达人显示 -->
                                <span class="shishang" style='width:4.3rem;'>时尚达人</span>
                            </div>
                            <p class='d-flex-md'>
                                <span class="time">魅力值：123333</span><span class="time" style="margin-left:-2.5rem;">粉丝：123444</span>
                            </p>                    
                            
                          </div>
                          <span class="getfoucs" style="width:60px">
                            相互关注
                          </span>
                        </div>       
                </div>
                <!-- 已关注 -->
                <div class="content d-flex-md">
                        <div style='display: flex;justify-content: space-between;width:100%;align-items: center'>
                          <img src="../images/487bd14049e44235d25f28df11b0a7e9.jpeg" alt=""  style="width:2.68rem;height:2.68rem;" class="avantar">
                          <div style="font-size: 12px;margin-top:0 !important;width:63%">
                            <div style="display: flex;align-items: flex-start;height:2rem;">
                                <span class="name">随便一个名字嘛随便一个名字嘛</span>
                                <!-- 是否为时尚达人显示 -->
                                <span class="shishang" style='width:4.3rem;'>时尚达人</span>
                            </div>
                            <p class='d-flex-md'>
                                <span class="time">魅力值：123333</span><span class="time" style="margin-left:-2.5rem;">粉丝：123444</span>
                            </p>                    
                            
                          </div>
                          <span class="getfoucs alreadyfoucus" style="width:60px">
                            已关注
                          </span>
                        </div>       
                </div>
                <div class="content d-flex-md">
                        <div style='display: flex;justify-content: space-between;width:100%;align-items: center'>
                          <img src="../images/487bd14049e44235d25f28df11b0a7e9.jpeg" alt=""  style="width:2.68rem;height:2.68rem;" class="avantar">
                          <div style="font-size: 12px;margin-top:0 !important;width:63%">
                            <div style="display: flex;align-items: flex-start;height:2rem;">
                                <span class="name">随便一个名字嘛随便一个名字嘛</span>
                                <!-- 是否为时尚达人显示 -->
                                <span class="shishang" style='width:4.3rem;'>时尚达人</span>
                            </div>
                            <p class='d-flex-md'>
                                <span class="time">魅力值：123333</span><span class="time" style="margin-left:-2.5rem;">粉丝：123444</span>
                            </p>                    
                            
                          </div>
                          <span class="getfoucs alreadyfoucus" style="width:60px">
                            已关注
                          </span>
                        </div>       
                </div>          
           </div>
          
    </div>
</body>
<script src="https://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
<script src="../js/back.js"></script>

<script>
          //点击关注切换
        
        $('.getfoucs').on('click',function(){
          
          if($(this).html()=='相互关注'){
            $(this).addClass('alreadyfoucus');
            $(this).html('已关注')

          }else{
            $(this).removeClass('alreadyfoucus');
            $(this).html('相互关注')
          }
          
          
        })


</script>
</html>